import {isEmpty, resetState} from '@/utils/index';
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex';
const exam = {
    data(){
        return {
            examStaticBar:undefined,
            examDynamicsBar:undefined,
            hasNotchInScreen:false,
            specs:{
                height:0,
                top:0,
                itemWidth:40
            },

        }
    },
    computed:{
        ...mapState({
            statusBarHeight:state=>state.settings.statusbar.height
        }),
    },
    methods:{
        drawExamBar(deviceWidth){
            // #ifdef APP-PLUS
            const $this = this;
            const {height,top,itemWidth} = this.specs;

            const staticData = this.examBarData.filter(s=>s.type!='dynamics')
            const dynamicsData = this.examBarData.filter(s=>s.type=='dynamics')

            const dynamicsWidth = itemWidth * dynamicsData.length;

            this.examDynamicsBar = new plus.nativeObj.View('examDynamicsBar',
                {top,left:(deviceWidth - dynamicsWidth) +'px',height:height,width: dynamicsWidth + 'px'});

            dynamicsData.forEach((item,index)=>{
                const richtext= `<img src="${item.img}" width="27px" height="20px"/>`+
                    `<br/><font style="font-size:8px;">${item.text}</font>`;
                const leftPos = index*itemWidth;
                // 绘制文本
                this.examDynamicsBar.drawRichText(richtext,
                    {
                        top:'9px',
                        left: leftPos + 'px',
                        width:100/dynamicsData.length+'%',
                        height:'100%'
                    },
                    {
                        onClick:function(e){
                            item.onPress($this);
                        }
                    },
                    item.id
                );
            });

            const width = itemWidth * staticData.length;
            this.examStaticBar = new plus.nativeObj.View('examStaticBar',
                {top,left: deviceWidth - dynamicsWidth - width +'px',height:height,width: width + 'px'});


            staticData.forEach((item,index)=>{
                const richtext= `<img src="${item.img}" width="20px" height="20px"/>`+
                    `<br/><font style="font-size:9px;">${item.text}</font>`;
                console.log('richtext:',richtext)
                const leftPos = index * itemWidth;
                // 绘制文本
                this.examStaticBar.drawRichText(richtext,
                    {
                        top:'9px',
                        left: leftPos + 'px',
                        width:100/staticData.length+'%',
                        height:'100%'
                    },
                    {
                        onClick:function(e){
                            item.onPress($this);
                        }
                    },item.id
                    );

                // if (item.render!=undefined && typeof item.render == 'function'){
                //     item.render($this,item);
                // }
            });



            // this.examBar.draw([
            //     {tag:'img',id:'headerImg',src:examBarData[0].img,
            //         position:{top,left:'10px',width:'26px',height:'26px'}
            //     },
            // ]);
            // this.examBar.interceptTouchEvent(true);
            // this.examBar.addEventListener("click",function () {
            //     this.userViewClick();
            // }, false);
            // #endif
        },
    },
    onLoad() {
        // #ifdef APP-PLUS
        const top = this.statusBarHeight+'px';
        //this.hasNotchInScreen = plus.navigator.hasNotchInScreen();
        const height = '44px';
        this.specs = {...this.specs,top,height};
        // console.log('examBarData:',this.examBarData);
        // console.log('plus.screen.resolutionWidth:',plus.screen.resolutionWidth)
        // console.log('plus.screen.scale:',plus.screen.scale)
        const deviceWidth = plus.screen.resolutionWidth //*plus.screen.scale;
        console.log('deviceWidth:',deviceWidth)
        this.drawExamBar(Number(deviceWidth))
        // #endif
    },
    onUnload(){
        // #ifdef APP-PLUS
        if(this.examStaticBar!=undefined){
            this.examStaticBar.close();
        }
        if(this.examDynamicsBar!=undefined){
            this.examDynamicsBar.close();
        }
        // #endif
    },
    onHide(){
        console.log('onHide:')
        // #ifdef APP-PLUS
        if(this.examStaticBar!=undefined){
            this.examStaticBar.hide();
        }
        if(this.examDynamicsBar!=undefined){
            this.examDynamicsBar.hide();
        }
        // #endif
    },
    onShow(){
        console.log('onShow:')
        // #ifdef APP-PLUS
        if(this.examStaticBar!=undefined){
            this.examStaticBar.show();
        }
        if(this.examDynamicsBar!=undefined){
            this.examDynamicsBar.show();
        }
        // #endif
    },
}

export default exam;